<template>
	<loading-wait v-if="loading"></loading-wait>
	<view class="uni-global-box">
		<view class="uni-global-title">
			系统设置 / 地区管理 / 新增地区
		</view>
		<view class="body">
			<u-form :model="form" ref="form1" class="u-form" label-width="0">
				<view class="u-form-textInput">
					<view class="u-form-name">
						广告类型
					</view>
					<u-form-item prop="type" :border-bottom="false">
						<u-checkbox-group @change="changeType">
							<u-checkbox v-model="item.checked" v-for="(item, index) in typeArr" :key="index"
								:name="item.value">
								{{ item.name }}
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						展示城市
					</view>
					<u-form-item prop="tags" :border-bottom="false">
						<uni-data-picker popup-title="展示城市" :localdata="city" v-model="form.city" @change="changeCity">
							<view class="selected">
								<u-form-item prop="tags" :border-bottom="false" style="">
									<view class="u-form-input-slot">
										<text v-if="form.city==0"> 全部 </text>
										<text v-else :class="!form.city?'uni-global-label':''">
											<text>{{ form.city?form.city:'展示城市' }}</text>
										</text>
										<text class="iconfont icon-xiajiantou" style="color:#c0c4cc"></text>
									</view>
								</u-form-item>
							</view>
						</uni-data-picker>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						广告标题
					</view>
					<u-form-item prop="title" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.title" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						广告排序
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.sort" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						<text class="u-form-required">*</text>
						广告图片
					</view>
					<u-form-item prop="image" :border-bottom="false">
						<uni-file-picker v-model="image" file-mediatype="image"
							:image-styles="{width:'405',height:'200'}" limit="1" @success="successImage">
							<view class="u-form-image">
								<text class="iconfont icon-shangchuanyunduan"></text>
							</view>
						</uni-file-picker>

					</u-form-item>
				</view>



				<u-button @click="submit" type="primary">提交</u-button>
			</u-form>
		</view>

	</view>
	<u-toast ref="uToast"></u-toast>
</template>

<script>
	import {
		rules
	} from "/common/js_file/advert.js";
	const global = uniCloud.importObject("global", {
		customUI: true
	});
	export default {
		data() {
			let form = {
				"image": '',
				"title": '',
				"type": [1, 2],
				"is_show": 1,
				"city": '0',
				"sort": ""
			}
			return {
				loading: false,
				form,
				rules,
				typeArr: [{
						name: '首页轮播',
						value: 1,
						disabled: false
					},
					{
						name: '技师列表',
						value: 2,
						disabled: false
					},
					{
						name: '店铺列表',
						value: 3,
						disabled: false
					},
				],
				image: [], // 广告图片
				city: [], // 城市
				uid: ''
			};
		},
		onLoad(val) {
			if (val.uid) {
				this.uid = val.uid;
				this.getData();
			} else {
				this.$refs.uToast.show({
					title: '环境异常',
					type: 'error',
					duration: 500,
					position: 'top',
					url: '/pages/user/user-list/user-list'
				})
			}
			this.getGity();
		},
		methods: {
			submit() {
				this.$refs.form1.validate(valid => {
					if (valid) {
						this.update(this.form);
					} else {

					}
				});
			},
			update(form) {
				form.sort = parseInt(form.sort);
				form.city = `${form.city}`;
				delete form._id
				// return console.log(form)
				global.updateData('advert', form, {
					_id: this.uid
				}).then(res => {
					this.$refs.uToast.show({
						title: '修改成功',
						type: 'success',
						duration: 500,
						position: 'top',
						url: '/pages/system/advert/advert'
					})
				})
			},
			getData() {
				this.loading = true;
				let field = " image,title,type,is_show,city,sort ";
				global.getOne('advert', {
					_id: this.uid
				}, field).then(res => {
					let data = res.data;
					this.form = data;
					this.image = {
						url: data.image
					};
					this.form.type = data.type.map(item => {
						for (let i = 0; i < this.typeArr.length; i++) {
							if (this.typeArr[i].value == item) {
								this.typeArr[i].checked = true;
							}
						}
					})
					this.loading = false;
				})
			},
			successImage(event) {
				let filePath = event.tempFilePaths[0];
				this.form.image = filePath;
			},
			// 获取城市列表
			getGity() {
				global.getList('city', {}, "sort asc", "title as text,_id,title as value", 0, 999).then(result => {
					this.city = result.data;
					this.city.unshift({
						text: '全部',
						value: 0
					})
				})
			},
			changeCity(ev) {
				this.form.city = ev.detail.value[0].value;
			},
			// 广告类型
			changeType(ev) {
				this.form.type = ev;
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.body {
		width: 50%;
	}
</style>